<template>
	<div class="cash-examine table-theme">
		<head-title title="审核--提现审核"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left">
					<div class="type-view">
						<div class="client-item" v-for="(item, index) in classifyList" @click="stateType(item.type)" :key="item.index"
						 :class="[status == item.type ? 'client-item-active' : '']">
							{{ item.name }}
						</div>
					</div>
				</div>

				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<search-view :option="optionList" @value="goSearch" @clear="refreshPage"></search-view>
				</div>
			</div>
			<p class="data-number">总数据数：{{total}}</p>
			<el-table :data="examineList">
				<el-table-column label="序号" align="center" prop="take_id"></el-table-column>
				<el-table-column label="用户序号	" align="center" prop="user_id"></el-table-column>
				<el-table-column label="提现端" align="center" prop="clientName"></el-table-column>
				<el-table-column label="手续费	" align="center" prop="service_charge"></el-table-column>
				<el-table-column label="提现金额	" align="center" prop="money"></el-table-column>
				<el-table-column label="提现时间" align="center" prop="add_time"></el-table-column>
				<el-table-column label="提现ip" align="center" prop="ip_address"></el-table-column>
				<el-table-column label="支付宝" align="center" prop="alipay_sn"></el-table-column>
				<el-table-column label="申请人" align="center" prop="real_name"></el-table-column>
				<el-table-column label="状态" align="center" prop="typeName"></el-table-column>
				<el-table-column label="操作" align="center" width="160">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="details(scope.row.use_type, scope.row.user_id)">详情</el-button>
						<el-button v-if="scope.row.is_take == 3" type="primary" size="mini" @click="operate(1, scope.row.take_id)">审核</el-button>
						<el-button v-if="scope.row.is_take == 3" type="danger" size="mini" @click="operate(2, scope.row.take_id)">拒绝</el-button>
						<el-button v-if="scope.row.is_take == 4 && admin_id == 4" type="primary" size="mini" @click="operate(3, scope.row.take_id)">打款</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination>
			</div>
		</el-card>
	</div>
</template>

<script>
	import ImgPopover from '@/components/ImgPopover';
	export default {
		components: {
			ImgPopover
		},
		data() {
			return {
				admin_id: localStorage.getItem('admin_id'),
				optionList: [{
						value: 0,
						label: '名字'
					},
					{
						value: 1,
						label: '账户'
					}
				],
				serach: {
					searchContent: '',
					classSelect: ''
				},
				examineList: [], // 审核列表
				total: 0,
				totalData: 0,
				status: 0,
				page: 0,
				classifyList: [{
					type: 0,
					name: '全部'
				}, {
					type: 4,
					name: '待审核'
				}, {
					type: 2,
					name: '通过'
				}, {
					type: 3,
					name: '拒绝'
				}]
			};
		},
		methods: {
			// 初始化列表
			init(e) {
				this.page = e;
				let data = {
					page: e - 1 ? e - 1 : 0,
					limit: 10,
					order_by: 'take_id',
					asc: 2
				};
				if (this.status != 0) {
					// data.is_take 3 待审核 1 审核通过 2 拒绝
					data.is_take = this.status - 1;
				}

				if (this.serach.classSelect == 0 && this.serach.searchContent != '') {
					data.keyword = this.serach.searchContent;
				} else if (this.serach.classSelect == 1 && this.serach.searchContent != '') {
					data.alipay_sn = this.serach.searchContent;
				}

				this.$http(this.$ApiList.WithdrawalList, data).then(res => {
					this.examineList = [];
					if (res.datas.length != 0) {
						this.examineList = res.datas.data;
						this.total = res.datas.count;
					}
				});
			},
			stateType(type) {
				this.status = type;
				this.init();
			},
			operate(type, id) {
				let data = {
					take_id: id
				};
				//type  1审核 2拒绝 3打款
				switch (type) {
					case 1:
						this.$confirm('确认审核通过吗, 是否继续?', '提示', {
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'warning'
							})
							.then(() => {
								this.$http(this.$ApiList.WithdrawalExamine, data).then(res => {
									this.$layer.msg('操作成功');
									this.page = 1;
									this.init();
								});
							})
							.catch(() => {});
						break;
					case 2:
						data.is_take = 2;
						this.$confirm('确认拒绝通过吗, 是否继续?', '提示', {
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'warning'
							})
							.then(() => {
								this.$http(this.$ApiList.WithdrawalCheck, data).then(res => {
									this.$layer.msg('操作成功');
									this.page = 1;
									this.init();
								});
							})
							.catch(() => {});

						break;
					case 3:
						data.is_take = 1;
						this.$confirm('确认操作吗, 是否继续?', '提示', {
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'warning'
							})
							.then(() => {
								this.$http(this.$ApiList.DepositExamine, data).then(res => {
									this.$layer.msg('操作成功');
									this.page = 1;
									this.init();
								});
							})
							.catch(() => {});

						break;
				}
			},
			details(use_type, user_id) {
				this.$router.push({
					path: '/withdrawal-details',
					query: {
						use_type: use_type,
						user_id: user_id
					}
				});
			},
			// 搜素
			goSearch(type, value) {
				this.serach.searchContent = value;
				this.serach.classSelect = type;
				this.init();
			},
			selectType() {
				this.init();
			},
			refreshPage() {
				this.page = 1;
				this.status = 0;
				this.serach.classSelect = '';
				this.serach.searchContent = '';
				this.init();
			}
		},
		created() {
			this.init();
		}
	};
</script>
<style lang="scss" scoped>
	.cash-examine .type-view {
		display: flex;
	}

	.cash-examine .type-view .client-item {
		margin-right: 40px;
		line-height: 40px;
		color: rgba(153, 153, 153, 1);
		cursor: pointer;
	}

	.cash-examine .client-item-active {
		color: #333333 !important;
		border-bottom: 4px solid #34a1e0;
	}
</style>
